<template>
    <div class="device-box">
        <div class="condition-box main_center">
            <slot />
            <div class="condition-item">
                <span class="icon">●</span><span class="title">选择位置</span>
                <div class="condition-content">
                    <el-tree ref="locationTree" @check="changeLocation" :data="locationTree" show-checkbox node-key="id"
                        :props="{disabled: disabledTree}">
                    </el-tree>
                </div>
            </div>
        </div>
        <device_space ref="deviceSpace" v-show="tag === 0" :search="{...search, location}" @showInfo="handleInfo">
            <div class="tag-box">
                <div class="tag tag-show">空间显示</div>
                <div class="tag" @click="tag = 1">列表显示</div>
            </div>
            <template #content>
                <slot name="spaceContent" />
            </template>
        </device_space>
        <device_list ref="deviceList" v-show="tag === 1" :search="{...search, location}"
            :dataProcessing="dataProcessing" @changePageNum="changePageNum">
            <div class="tag-box">
                <div class="tag" @click="tag = 0">空间显示</div>
                <div class="tag tag-show">列表显示</div>
            </div>
            <template #table-column>
                <slot name="table-column" />
            </template>
            <template #list-search>
                <slot name="list-search" />
            </template>
        </device_list>
        <div style="width: 10px"></div>
    </div>
</template>

<script>
import Device_space from './device_space.vue';
import Device_list from './device_list.vue';
import { initMonitor, getMonitorList, xqList } from '../../url/api';
export default {
    name: 'device_manage',
    components: { Device_list, Device_space },
    props: {
        search: {
            type: Object,
            default: () => ({}),
        },
        dataProcessing: {
            type: Function,
            default: () => {},
        },
    },
    data() {
        return {
            tag: 0,
            location: [],
            locationTree: [
                {
                    id: 1,
                    label: '天健天玺',
                    children: [
                        {
                            id: 2,
                            label: '文科楼A座',
                            children: [
                                {
                                    id: 3,
                                    label: '一层',
                                },
                                {
                                    id: 4,
                                    label: '二层',
                                },
                                {
                                    id: 9,
                                    label: '中山大学深圳校区',
                                    children: [
                                        {
                                            id: 10,
                                            label: '文科楼A座',
                                            children: [
                                                {
                                                    id: 11,
                                                    label: '一层',
                                                },
                                                {
                                                    id: 12,
                                                    label: '二层',
                                                },
                                            ],
                                        },
                                    ],
                                },
                            ],
                        },
                        {
                            id: 5,
                            label: '理科楼B座',
                            children: [
                                {
                                    id: 6,
                                    label: '一层',
                                },
                                {
                                    id: 7,
                                    label: '二层',
                                },
                                {
                                    id: 8,
                                    label: '三层',
                                },
                            ],
                        },
                    ],
                },
            ],
            formSearch:{
                size: 10,
                current: 1,
                xqId: 0,
            }
        };
    },
    methods: {
        changePageNum(val) {
            console.log('页码', val);
            this.formSearch.current = val;
            this.$emit('changePageNum', val);
        },
        getSelectedDevice() {
            return this.$refs.deviceList.getSelectedDevice();
        },
        disabledTree(data) {
            return data.children;
        },
        changeLocation(data, node) {
            let locationTree = this.$refs['locationTree'];
            if (data.children) {
                locationTree.setChecked(data.id, false, true);
            } else {
                locationTree.setCheckedNodes([data]);
                let nodes = locationTree.getHalfCheckedNodes();
                let node = locationTree.getCheckedNodes()[0];
                this.location = [...nodes, node];
            }
            this.$refs.deviceSpace.getImg();
            this.$refs.deviceList.getTableData();
        },
        handleInfo(info) {
            this.$emit('handleInfo', info);
        },
        getList() {
            getMonitorList(this.formSearch).then((resp) => {
                this.dataProcessing = resp.data.data.records;
            });
        },
    },
    mounted() {
        // this.getList();
    },
};
</script>

<style scoped>
.device-box {
    display: flex;
    width: 100%;
    height: 730px;
}

.main_center {
    border-radius: 5px;
    padding: 10px;
}

.condition-box {
    margin-right: 10px;
    width: max-content;
    min-width: 225px;
}

.condition-item {
    margin-bottom: 20px;
}

.content-box {
    width: 100%;
    height: 100%;
    border-radius: 5px;
    padding: 10px;
    display: flex;
    flex-direction: column;
}

/deep/ .content-title-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: max-content;
}

/deep/ .icon {
    font-size: 20px;
    color: rgb(166, 166, 166);
    margin: 0 5px;
}

/deep/ .title {
    font-weight: 400;
    font-size: 18px;
    color: rgb(16, 16, 16);
    font-style: normal;
    letter-spacing: 0;
    line-height: 27px;
    text-decoration: none;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/deep/ .condition-content {
    padding-left: 22px;
    margin: 5px 0 0 0;
    overflow: auto;
}

/deep/ .title-box {
    display: flex;
    align-items: center;
    width: max-content;
}

/deep/ .tag-box {
    width: max-content;
    display: flex;
    align-items: center;
}

/deep/ .tag {
    padding: 10px 15px;
    width: max-content;
    background-color: #dbdbdb;
    border: 1px #bbbbbb solid;
    border-radius: 2px;

    font-weight: 400;
    font-size: 16px;
    color: rgb(16, 16, 16);
    font-style: normal;
    letter-spacing: 0;
    line-height: 20px;
    text-decoration: none;
    cursor: pointer;
}

/deep/ .tag:hover {
    background-color: #ebebeb;
}

/deep/ .tag-show {
    background-color: #ffffff;
    border-color: #47c4b7;
    border-top-width: 3px;

    cursor: default;
}

/deep/ .tag-show:hover {
    background-color: #ffffff;
}

/deep/ .search {
    width: 250px;
    margin-right: 10px;
}

/deep/ .content {
    flex: 1;
    margin-top: 5px;
    display: flex;
    justify-content: center;
}

/deep/ i {
    margin-right: 5px;
}
</style>
